<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>单词点读机</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        .controls {
            display: flex;
            gap: 20px;
            margin-bottom: 30px;
        }

        .control-btn {
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        .row {
            display: flex;
            margin-bottom: 30px;
        }

        .prefix {
            font-size: 40px;
            font-weight: bold;
            width: 80px;
            margin-right: 20px;
        }

        .words-container {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 15px;
            flex: 1;
        }

        .word-box {
            border: 2px solid #ddd;
            border-radius: 8px;
            padding: 15px;
            text-align: center;
            min-width: 150px;
        }

        .emoji {
            font-size: 40px;
            margin-bottom: 10px;
        }

        .word-text {
            font-size: 20px;
            margin: 5px 0;
        }

        .translation {
            color: #666;
        }

        .audio-icon {
            font-size: 24px;
            cursor: pointer;
            color: #2196F3;
        }

        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <div class="controls">
        <button class="control-btn" id="toggleWords">Hide the words</button>
        <button class="control-btn" id="togglePictures">Hide the pictures</button>
    </div>

    <div id="mainContent">
        <!-- 各单词行结构 -->
        <div class="row">
            <div class="prefix">bl</div>
            <div class="words-container">
                <!-- 示例单词结构（其他行类似） -->
                <div class="word-box">
                    <div class="emoji">🌀</div>
                    <div class="word-text">blue</div>
                    <div class="translation">蓝色</div>
                    <div class="audio-icon">🔊</div>
                </div>
                <!-- 其他bl系列单词 -->
            </div>
        </div>
        <!-- 其他行结构 -->
    </div>

    <script>
        // 单词数据配置
        const wordData = {
            "bl": [
                { word: "blue", emoji: "🌀", translation: "蓝色" },
                { word: "black", emoji: "⬛", translation: "黑色" },
                { word: "blocks", emoji: "🧱", translation: "积木" },
                { word: "blouse", emoji: "👚", translation: "女衬衫" },
                { word: "blanket", emoji: "🛌", translation: "毯子" }
            ],
            "pl": [
                { word: "plane", emoji: "✈️", translation: "飞机" },
                { word: "play", emoji: "🎮", translation: "玩耍" },
                { word: "plant", emoji: "🌱", translation: "植物" },
                { word: "plus", emoji: "➕", translation: "加" },
                { word: "plum", emoji: "🍑", translation: "李子" }
            ],
            "cl": [
                { word: "clock", emoji: "⏰", translation: "时钟" },
                { word: "class", emoji: "🏫", translation: "班级" },
                { word: "cloud", emoji: "☁️", translation: "云" },
                { word: "clean", emoji: "🧹", translation: "清洁" },
                { word: "closet", emoji: "🚪", translation: "衣柜" }
            ],
            "gl": [
                { word: "glue", emoji: "🧴", translation: "胶水" },
                { word: "glass", emoji: "🥛", translation: "玻璃" },
                { word: "glove", emoji: "🧤", translation: "手套" },
                { word: "globe", emoji: "🌍", translation: "地球仪" },
                { word: "glow", emoji: "✨", translation: "发光" }
            ]
        };

        // 动态生成内容
        function renderContent() {
            const main = document.getElementById('mainContent');
            main.innerHTML = Object.entries(wordData).map(([prefix, words]) => `
                <div class="row">
                    <div class="prefix">${prefix}</div>
                    <div class="words-container">
                        ${words.map(word => `
                            <div class="word-box">
                                <div class="emoji">${word.emoji}</div>
                                <div class="word-text">${word.word}</div>
                                <div class="translation">${word.translation}</div>
                                <div class="audio-icon" onclick="speak('${word.word}')">🔊</div>
                            </div>
                        `).join('')}
                    </div>
                </div>
            `).join('');
        }

        // 语音功能
        function speak(word) {
            const synth = window.speechSynthesis;
            const utterance = new SpeechSynthesisUtterance(word);
            utterance.lang = 'en-US';
            synth.speak(utterance);
        }

        // 切换控制功能
        let wordsVisible = true;
        let picturesVisible = true;

        document.getElementById('toggleWords').addEventListener('click', () => {
            wordsVisible = !wordsVisible;
            document.querySelectorAll('.word-text, .translation').forEach(el => {
                el.classList.toggle('hidden', !wordsVisible);
            });
        });

        document.getElementById('togglePictures').addEventListener('click', () => {
            picturesVisible = !picturesVisible;
            document.querySelectorAll('.emoji').forEach(el => {
                el.classList.toggle('hidden', !picturesVisible);
            });
        });

        // 初始化渲染
        renderContent();
    </script>
</body>
</html>